import type { FC, PropsWithChildren } from 'react'
import Icon from '../../../Icon'
import View from '../../../common/View'
import { getRgb, initvalue } from '../../../common/utils'
import { useAccentColor } from '../../../common/hooks/useAccentColor'
import { context } from '../../../common/context'

const Title: FC<PropsWithChildren<{ name: string }>> = ({ children, name }) => {
  const { resume: { content, customization }, fontScale } = context

  const { spacing, applyAccentColor, title } = customization

  const { showIcon, style, titleBkg: bkg } = title || {}
  const { fontSize, spacingFactor } = spacing
  const titleFontSize = `${((fontSize || 0) * 0.5 + initvalue.fontSize + 1) * fontScale}pt`
  const item = content[name]
  const styles: any = {
    display: 'flex',
    alignItems: 'center',
    gap: '4px',
    fontSize: titleFontSize,
    marginBottom: `${spacingFactor * 0.2 + 2}px`,
    paddingBottom: '5px',
    paddingTop: '5px',
    lineHeight: 1.2
  }

  const [color, position] = useAccentColor(name)
  if (applyAccentColor?.includes('headings') && position) {
    styles.color = color
  }
  let titleBkg = null
  let borderBottomColor = `currentColor`
  if (bkg) {
    titleBkg = getRgb(bkg)
    borderBottomColor = getRgb(bkg)
  }

  return (<View>
    <h3 style={{ ...styles, background: titleBkg || 'rgba(0,0,0,.04)', paddingLeft: '10px', borderLeft: `4px solid ${getRgb({ ...bkg, a: 1 })}` }}>
      {
        children || <>
          {showIcon ? <Icon name={item?.iconKey} ></Icon> : null}
          {item?.displayName}
        </>
      }
    </h3>
  </View>)
}
export default Title
